<template>
	<!-- 人员状态 -->
	<view class="user-state">
		<view class="state-content">
			<view class="search">
				<u-search
					shape="square"
					placeholder="请输入员工名称" 
					input-align="left" 
					height="70" 
					bg-color="#ffffff"
					border-color="#f5f5f5"
					:show-action="false" 
					v-model="searchKey" 
					@search="onSearch">
				</u-search>
			</view>
			<view class="header-state"> 
				<u-row gutter="16">
						<u-col span="4">
							<view class="header-state-item">
								<text>待命中</text>
								<text style="margin-top: 20rpx;">{{ standByCount }}人</text>
							</view>
						</u-col>
						<u-col span="4">
							<view class="header-state-item">
								<text>待维修</text>
								<text style="margin-top: 20rpx;">{{ waitRepairCount }}人</text>
							</view>
						</u-col>
						<u-col span="4">
							<view class="header-state-item">
								<text>维修中</text>
								<text style="margin-top: 20rpx;">{{ repairingCount }}人</text>
							</view>
						</u-col>
					</u-row>
			</view>
			<u-gap height="30" bg-color="#f5f5f5"></u-gap>
			<view class="state-list">
				<view class="list-head">
					<text>维修组</text>
				</view>
				<view class="list-items">
					<view >
						<u-row class="item-wrap">
							<u-col span="3">
								<view class="state-item">
									<text>人员</text>
								</view>
							</u-col>
							<u-col span="3">
								<view class="state-item">
									<text>状态</text>
								</view>
							</u-col>
							<u-col span="3">
								<view class="state-item">
									<text>维修</text>
								</view>
							</u-col>
							<u-col span="3">
								<view class="state-item">
									<text>维修中</text>
								</view>
							</u-col>
						</u-row>
					</view>
					<view v-for="(item,index) in repairList" :key="index" >
						<u-row class="item-wrap">
							<u-col span="3">
								<view class="state-item">
									<text>{{ item.name }}</text>
								</view>
							</u-col>
							<u-col span="3">
								<view class="state-item">
									<view>{{ item.state }}</view>
								</view>
							</u-col>
							<u-col span="3">
								<view class="state-item">
									<text>{{ item.unrepairCount }}</text>
								</view>
							</u-col>
							<u-col span="3">
								<view class="state-item">
									<text>{{ item.repairingCount }}</text>
								</view>
							</u-col>
						</u-row>
						<u-line ></u-line>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				searchKey:'',
				standByCount:0,
				waitRepairCount:0,
				repairingCount:2,
				repairList:[
					{
						name:'李工',
						state:'维修中',
						unrepairCount:10,
						repairingCount:3
					},
					{
						name:'李工',
						state:'维修中',
						unrepairCount:10,
						repairingCount:3
					},
					{
						name:'李工',
						state:'维修中',
						unrepairCount:10,
						repairingCount:3
					},
					{
						name:'李工',
						state:'维修中',
						unrepairCount:10,
						repairingCount:3
					},
					{
						name:'李工',
						state:'维修中',
						unrepairCount:10,
						repairingCount:3
					},
				],
			}
		},
		methods:{
			onSearch(key){
				console.log('search key:',key)
			}
		}
	}
</script>

<style scoped lang="scss">
	.user-state{
		display: flex;
		flex-direction: column;
	}
	.state-content{
		flex: 1;
		display: flex;
		flex-direction: column;
		.search{
			padding: 30rpx 30rpx;
		}
		.header-state{
			padding: 0 30rpx 30rpx;
			.header-state-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background: #f5f5f5;
				height: 200rpx;
			}
		}
		.state-list{
			display: flex;
			flex-direction: column;
			.list-head{
				height: 80rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.item-wrap{
				padding: 0 30rpx;
				.state-item{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
			}
			
		}
	}
	
		
</style>
